<template>
	<!-- 我的车位 -->
	<view class="myParkingLot">
			<view @click="navigateTo(v.person.state)" class="myParkingLot-box" v-for="v in tableData" :key="v.id">
				<view class="myParkingLot-box-header">
					<view>
						{{community}}小区停车场
					</view>
					<view class="success"><text>{{v.person.state=='审核中'?'认证中':v.person.state=='审核通过'?'认证成功':'认证失败'}}</text></view>
				</view>
				<view class="myParkingLot-box-bottom">
					<view class="font cw">
						<view class=""><text>车位楼层</text><text> {{v.floor}}</text></view>
						<view class="" style="margin-left: 22px;"><text>车位区域</text><text> {{v.regionParking.region.name}}</text></view>
					</view>
					<view class="font cw">
						<view class=""><text>车位编号</text><text>{{ v.carparkingId}}</text></view>
						<view class=""><text>车位状态</text><text> {{v.parkingType.carState}}</text></view>
					</view>
					<view class="font"><text>绑定车牌</text><text> {{v.carNum}}</text></view>
				</view>
			</view>
			<navigator url="parkingDetail/parkingDetail" hover-class="navigator-hover" >
			
		</navigator>

		<!-- <navigator url="parkingDetail/parkingDetail" hover-class="navigator-hover">
			<view class="myParkingLot-box">
				<view class="myParkingLot-box-header">
					<view>
						南航碧桂园小区停车场
					</view>
					<view class="pending"><text>认证中</text></view>
				</view>
				<view class="myParkingLot-box-bottom">
					<view class="font cw">
						<view class=""><text>车位楼层</text><text> B2</text></view>
						<view class=""><text>车位区域</text><text> A区</text></view>
					</view>
					<view class="font cw">
						<view class=""><text>车位编号</text><text> 02</text></view>
						<view class=""><text>车位状态</text><text> 租赁</text></view>
					</view>
					<view class="font"><text>绑定车牌</text><text> 浙B·C7788</text></view>
				</view>
			</view>
		</navigator>
		<navigator url="parkingDetail/parkingDetail" hover-class="navigator-hover">
			<view class="myParkingLot-box">
				<view class="myParkingLot-box-header">
					<view>
						南航碧桂园小区停车场
					</view>
					<view class="error"><text>认证失败</text></view>
				</view>
				<view class="myParkingLot-box-bottom">
					<view class="font cw">
						<view class=""><text>车位楼层</text><text> B2</text></view>
						<view class=""><text>车位区域</text><text> A区</text></view>
					</view>
					<view class="font cw">
						<view class=""><text>车位编号</text><text> 02</text></view>
						<view class=""><text>车位状态</text><text> 租赁</text></view>
					</view>
					<view class="font"><text>绑定车牌</text><text> 浙B·C7788</text></view>
				</view>
			</view>
		</navigator> -->
		<navigator url="addParkingLost/addParkingLost" hover-class="navigator-hover">
			<button type="default">+ 添加车位</button>
		</navigator> 
	</view>
</template>

<script>
	import {
		http
	} from '../../utils/http.js'
	export default {
		data() {
			return {
				type: '认证成功',
				serialNo: '',
				community:'',
				tableData: []
			};
		},
		methods:{
			navigateTo(v){
				let json={v:v,table:this.tableData}
				uni.navigateTo({
					url:'parkingDetail/parkingDetail?state='+JSON.stringify(json)
				})
			}
		},
		onLoad() {
			console.log(1111)
			try {
				const list = uni.getStorageSync('list');
				if (list) {
					this.serialNo = list.serialNo
					this.community=list.community
				}
				http({
						url: '/parking/list',
						params: {
							page: 1,
							limit: 10000,
							serialNo: this.serialNo
						}
					})
					.then(({
						data
					}) => {
						console.log(data)
						this.tableData = data
					})
			} catch (e) {
				// error
			}
		}
	}
</script>

<style lang="less" scoped>
	.public() {
		// width: 130rpx;
		height: 46rpx;
		border-radius: 6px;
		font-weight: bold;
		text-align: center;
		line-height: 46rpx;
		padding: 0 18rpx 0 18rpx;
	}

	.myParkingLot {
		font-size: 28rpx;

		.myParkingLot-box {
			display: flex;
			flex-direction: column;
			margin: 20rpx auto;
			width: 680rpx;
			height: 320rpx;
			box-shadow: 0px 0px 10rpx rgba(0, 0, 0, 0.5);
			border-radius: 4px;

			.myParkingLot-box-header {
				height: 106rpx;
				display: flex;
				justify-content: space-around;
				align-items: center;
				border-bottom: 1px solid #eee;

				.success {
					.public();
					background: #d4f6e3;
					color: #4ad98a;
				}

				.pending {
					.public();
					background: #ffe9d7;
					color: #ff9037;
				}

				.error {
					.public();
					background: #fde0e0;
					color: #f45c5c;
				}
			}

			.myParkingLot-box-bottom {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-around;

				.font {
					margin-left: 64rpx;
				}

				.font text:nth-child(1) {
					color: #9e9e9e;
					margin-right: 28rpx;
				}

				.cw {
					display: flex;
				}

				.cw view:nth-child(1) {
					margin-right: 100rpx;
				}
			}
		}

		button {
			width: 680rpx;
			height: 80rpx;
			font-size: 36rpx;
			padding: 0;
			line-height: 80rpx;
			background: #006fff;
			color: white;
		}
	}
</style>
